index.mdx

{/* we use index.mdx instead index.tsx to wrap page with , then */}

{/* parse headings to build TOC and parse frontmatter to add page heading */}

import { translate } from '@edgeandnode/gds' import { buildDynamicMDX } from 'nextra/remote' import { RemoteContent } from 'nextra/data' import { supportedLocales, translations } from '@/i18n'

import { Intro, NetworkRoles, Products, SupportedNetworks } from '@/src/IndexPage' import { getPageMap } from '@/src/getPageMap' import { getSupportedNetworks } from '@/src/supportedNetworks'

export const getStaticPaths = () => { return { paths: supportedLocales.map((locale) => ({ params: { locale } })), fallback: false, } }

{/* Only in dynamic route we can't use buildGetStaticProps function, because route is based on filename of mdx page */}

export const getStaticProps = async ({ params: { locale } }) => { const t = (key) => translate(translations, locale, key) const rawMdx = `--- title: ${t('index.title')}

${t('index.intro')}

${t('index.networkRoles.title')}

${t('index.networkRoles.description')}

${t('index.products.title')}

## ${t('index.supportedNetworks.title')} ${t('index.supportedNetworks.description')} ${t('index.supportedNetworks.footer').replace('{0}', `[${t('index.supportedNetworks.title')}](/developing/supported-networks/)`)}` const mdx = await buildDynamicMDX(rawMdx, { codeHighlight: false }) return { props: { ...mdx, __nextra_pageMap: await getPageMap(locale), ssg: { supportedNetworks: await getSupportedNetworks(), }, }, } }

<RemoteContent components={{ Intro, NetworkRoles, Products, SupportedNetworks }} />